<div class="content-wrapper" style="min-height: 911px;">

    <!-- content body -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">目录管理</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="dataTables_wrapper">
                            <div class="custom-search-bar">
                                <select name="keyword-select" id="keyword-select" class="keyword-select">
                                    <option value="position">位置</option>
                                    <option value="fileNumber">档号</option>
                                    <option value="names">姓名</option>
                                </select>
                                <input type="text" placeholder="关键词" class="keyword" name="keyword" id="keyword">
                                <button type="button" class="btn btn-primary js-search-keyword">查询</button>
                            </div>
                            
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="info_table" class="table table-bordered table-hover ">
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="dropdown">
                    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="true">
                        <i class="fa fa-wrench"></i>
                        上传 / 打印
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li>
                            <a href="#" class="jsUploadExcel">
                                <i class="fa fa-cloud-upload" style="color:rgb(3, 102, 184)"></i>
                                目录excel导入
                            </a>
                        </li>
                        <li>
                            <a href="#" class="jsUploadPhotos">
                                <i class="fa fa-cloud-upload" style="color:rgb(3, 102, 184)"></i>
                                证件图片导入
                            </a>
                        </li>
                        <li>
                            <a href="#" class="jsPrint">
                                <i class="fa fa-print"></i>
                                批量打印
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- excel批量上传 -->
    <div class="upload-wrapper" style="z-index:3">

    </div>


    <!-- 与证件相关的表格内容 -->
    <div class="image-modal-wrapper modal" style="z-index:3">
        <div class="image-modal-container">
            <div class="modal-header">
                <h3>相关证件
                    <a class="close-btn-table pull-right">&times;</a>
                </h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <table id="credential-table"></table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn jsCloseBtn btn-danger">关闭</button>
            </div>
        </div>
    </div>
    <!-- /.与证件相关的表格内容 -->

    <!-- 点击提名弹出的模态框 -->
    <div class="credentials-wrapper modal" style="z-index:4">

    </div>
    <!-- /.点击提名弹出的模态框 -->

    <div class="print-hint-wrapper modal">
        <div class="print-container">
            <div class="modal-header">
                <h3>目录批量打印
                    <a class="js-close-print-btn pull-right" style="cursor:pointer;">&times;</a>
                </h3>
            </div>
            <div class="modal-body">
                <div class="range">
                    <form class="form-inline">
                        <div class="form-group">
                            <input type="number" name="start-print-index" id="start-print-index" placeholder="开始序号" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="number" name="end-print-index" id="end-print-index" placeholder="结束序号" class="form-control">
                        </div>
                    </form>
                    <div class="error-msg">打印范围不能为空！</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success js-print-btn">
                    <i class="fa fa-print"></i>
                    打印
                </button>
                <button type="button" class="btn btn-danger js-close-print-btn">
                    <i class="fa fa-close"></i>
                    关闭</button>
            </div>
        </div>
    </div>

    <div class="photo-upload-wrapper modal" style="z-index:3">
        <div class="photo-content-container">
            <div class="modal-header">
                <h3>
                    证件照上传
                    <a href="#" class="close-btn pull-right">&times;
                    </a>
                </h3>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <strong>
                        <i class="fa fa-warning"></i> 请将图片打包成zip再上传</strong>
                </div>
                <form method="POST" enctype="multipart/form-data" id="uploadPhotosForm">
                    <div class="form-group">
                        <input type="file" class="jfilestyle" id="uploadPhotoZip-btn" name="photoZip[]">
                    </div>
                </form>
                <div class="progress">
                    <div class="progress-bar active progress-bar-success progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100"
                        style="width: 0%">
                        <span class="percentage"></span>
                    </div>
                </div>
                <div class="upload-success">上传成功！</div>
                <div class="upload-error">没有选择文件！</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success upload-photo-btn">
                    <i class="fa fa-upload"></i>
                    上传
                </button>
                <button type="button" class="close-btn btn btn-danger">
                    <i class="fa fa-close"></i>
                    关闭
                </button>
            </div>
        </div>
    </div>
</div>